<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <style>
        .login-container {
            width: 300px;
            margin: auto;
            padding: 50px 0;
        }
    </style>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>
<body>

<div class="login-container">
    <form id="loginForm" class="form-horizontal">
        <div class="form-group form-group-lg">
            <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
        </div>
        <div class="form-group form-group-lg">
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
        </div>
        <div class="form-group form-group-lg">
            <button class="btn btn-primary btn-block btn-lg">登录</button>
        </div>
    </form>
</div>

<script>
    $(function() {
        $('#loginForm').submit(function(e) {
            e.preventDefault();

            var username = $.trim($('#username').val());
            var password = $.trim($('#password').val());
            if(!username) {
                alert('请输入用户名');
                return false;
            }

            if(!password) {
                alert('请输入密码');
                return false;
            }

            $.post('/login', {
                username: username,
                password: password
            }, function(res) {
                alert(JSON.stringify(res));
                location.href = '/user';
            })
        });

        $('#logout').click(function() {
            $.get('/logout', function(res){
                console.log(res);
            });
        });
    });
</script>
</body>
</html>